<script lang="ts" setup>
import HomeLive from '@/components/HomeLive.vue'
import { ref } from 'vue'
import { Api } from '@/apis'

import type { ModuleData, ModuleListBanner } from "@/typings"

const module_list = ref<ModuleData[]>([])
const module_list_banner = ref<ModuleData[]>([])
const banner_list = ref<ModuleListBanner[]>([])

const getLiveData = async () => {
  let { data } = await Api.getLiveData()
  module_list.value = data.data.module_list.filter((t, i) => {
    if (i > 0) {
      return t
    }
  })

  module_list_banner.value = data.data.module_list.filter((t, i) => {
    if (i == 0) {
      return t
    }
  })

  banner_list.value = module_list_banner.value[0].list

  console.log('****** liveData ******')
  console.log("直播数据列表(data):", data.data, module_list.value, module_list_banner.value)
  console.log('****** liveData ******')
}

getLiveData()
</script>

<template>
  <div class=" bg-gray-100">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="b in  banner_list">
        <img :src="b.pic" alt="">
      </van-swipe-item>
    </van-swipe>
    <div v-for="r in module_list" :key="r.module_info.id" class=" px-2 mb-3 bg-white">
      <div class=" flex justify-between px-1 py-2">
        <div>{{ r.module_info.title }}</div>
        <div class=" text-neutral-400">查看更多<span class="iconfont icon-jinrujiantouxiao ml-2"></span></div>
      </div>
      <div class=" flex flex-wrap">
        <div v-for="item in r.list" :key="item.roomid"  class="w-1/2 px-2 py-2 mb-2" style=" width: 50%;">
          <HomeLive :list="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<style>

</style>
